import { Directive } from 'vue'
import { store } from '@/store'
// 这里是自定义指令，参考文档：https://v3.cn.vuejs.org/guide/custom-directive.html#%E7%AE%80%E4%BB%8B
// 知识点：自定义指令的封装
export const permission: Directive = {
  mounted (el, binding) {
    // value 就是按钮上的权限，binding就是我们传递给指令的值
    // console.log('binding就是我们传递给指令的值',binding);
    const { value } = binding
    // 获取用户的所有的权限
    const permissions = store.getters['user/getPermissions']
    // console.log('所有权限', permissions);
    // 判断传递进来的权限按钮，是否存在
    if (value && value instanceof Array && value.length > 0) {
      // 注意这个permissionRoles是一个数组类型
      const permissionRoles = value
      // console.log(permissionRoles);
      const hasPermission = permissions.some(role => {
        // 这里就是判断从vuex中获取的角色权限（它是一个数组），只要有一个元素
        // 能够被从按钮上获取的角色列表包含，就算通过，就是true，否则就是false
        return permissionRoles.includes(role)
      })
      if (!hasPermission) {
        el.style.display = 'none'
      }
    } else {
      throw new Error("need roles! Like v-permission=\"['add','edit']\"")
    }
  }
}
